/*
 * milens - jQuery Plugin
 * version: 1.0.0 (Tue, 10 Sep 2013)
 * @requires jQuery v1.9 or later
 *
 * Examples at http://
 * License:
 *
 * Copyright 2013 Claudio Rosales - linuled@gmail.com
 *
 */

(function($) {

    $.fn.milens = function(parameters){

        var config = $.extend({}, $.fn.milens.cfg, parameters);

        if($('.' + config.lens_class).length === 0){
            $('body').prepend('<div class="' + config.lens_class + '">&nbsp;</div>');
        }
            
        $(this).each(function(){
                
            var id = Date.now();

            $('body').prepend('<div class="' + config.marco_class + '" data-id="' + id + '"><img src="' + $(this).attr('data-src') + '" alt=""/></div>');
            $(this).attr('data-marco', id);

            $.fn.milens.ajustarMarco($(this));

            $('.' + config.marco_class + '[data-id="' + id + '"]').mousemove(function(event) {

                var id = $(this).data('id');
                    
                //console.log(event.pageY + 'x' + event.pageX);

                var posy = event.pageY;
                var posx = event.pageX;

                var marco_height = $(this).height();
                var marco_width = $(this).width();
                var marco_top = $(this).offset().top;
                var marco_left = $(this).offset().left;
                var marco_posy = posy - marco_top;
                var marco_posx = posx - marco_left;

                var percentage_top = (marco_posy * 100) / marco_height;
                var percentage_left = (marco_posx * 100) / marco_width;
                    
                var imgmax = $('div.' + config.marco_class + '[data-id="' + id + '"] img');
                var imgmax_top = (((percentage_top * imgmax.height()) / 100) - (config.lens_size / 2)) * -1;
                var imgmax_left = (((percentage_left * imgmax.width()) / 100) - (config.lens_size / 2)) * -1;

                $('.' + config.lens_class).css({
                    'display' : 'block',
                    'top' : (posy - (config.lens_size / 2)) + 'px',
                    'left' : (posx - (config.lens_size / 2)) + 'px',
                    'width' : config.lens_size + 'px',
                    'height' : config.lens_size + 'px',
                    'border' : config.lens_border_size + 'px ' + config.lens_border_color + ' solid',
                    'border-radius' : config.lens_border_radius + 'px',
                    '-moz-border-radius' : config.lens_border_radius + 'px',
                    '-webkit-border-radius' : config.lens_border_radius + 'px',
                    'box-shadow' : '0px 0px ' + config.lens_shadow_size_outer + 'px 0px ' + config.lens_shadow_color_outer + ', 0px 0px ' + config.lens_shadow_size_inner + 'px 0px ' + config.lens_shadow_color_inner + ' inset',
                    '-moz-box-shadow' : '0px 0px ' + config.lens_shadow_size_outer + 'px 0px ' + config.lens_shadow_color_outer + ', 0px 0px ' + config.lens_shadow_size_inner + 'px 0px ' + config.lens_shadow_color_inner + ' inset',
                    '-webkit-box-shadow' : '0px 0px ' + config.lens_shadow_size_outer + 'px 0px ' + config.lens_shadow_color_outer + ', 0px 0px ' + config.lens_shadow_size_inner + 'px 0px ' + config.lens_shadow_color_inner + ' inset',
                    'background' : 'url("' + imgmax.attr('src') + '") no-repeat ' + imgmax_left + 'px ' + imgmax_top + 'px'
                });
                    
                $('div.' + config.marco_class + '[data-id=' + id + ']').css({'cursor' : config.lens_cursor});

            }).mouseout(function() {
                $('.' + config.lens_class).css({'display' : 'none'});
            });
        });
            
        $(window).resize(function() {
            $('img[data-marco]').each(function(){
                $.fn.milens.ajustarMarco($(this));
            });
        });
    };
    
    $.fn.milens.ajustarMarco = function(imagen) {
        
        var config = $.fn.milens.cfg;

        var id = imagen.attr('data-marco');

        var image_padding_top = parseInt(imagen.css('padding-top').replace('px', ''));
        var image_padding_left = parseInt(imagen.css('padding-left').replace('px', ''));

        var image_border_top = parseInt(imagen.css('border-top-width').replace('px', ''));
        var image_border_left = parseInt(imagen.css('border-left-width').replace('px', ''));

        var image_top = imagen.offset().top + image_padding_top + image_border_top;
        var image_left = imagen.offset().left + image_padding_left + image_border_left;

        var image_height = imagen.height();
        var image_width = imagen.width();

        $('div.' + config.marco_class + '[data-id="' + id + '"]').css({
            'top': image_top + 'px',
            'left': image_left + 'px',
            'width': image_width + 'px',
            'height': image_height + 'px'
        });
    };
    
    $.fn.milens.cfg = {
        lens_class: 'milens-lens',
        lens_size: 300,
        lens_cursor: 'none', //none, crosshair, move, 
        lens_border_size: 0,
        lens_border_color: '#fff',
        lens_border_radius: 150,
        lens_shadow_size_outer: 10,
        lens_shadow_color_outer: '#000',
        lens_shadow_size_inner: 10,
        lens_shadow_color_inner: '#fff',

        marco_class: 'milens-marco'
    };

}(jQuery));


